<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: auto;
            margin: 0%;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-size: 16px;
            font-family: 'Courier New', Courier, monospace;
            padding: 20px;
        }

        h2 {
            margin: 0%;
            padding: 10px;
        }

        button {
            padding: 5px 60px;
            border: none;
            cursor: pointer;
        }

        .s {
            background-color: rgb(68, 153, 233);
            color: white;

        }

        .c {
            background-color: rgba(179, 177, 177, 0.904);
        }

        .clue {
            display: flex;
            padding: 10px;
        }

        .right {
            flex: 1;
        }

        .in {
            width: 100%;
            padding: 5px 10px;
            outline: none;
        }

        .left {
            width: 100px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <form>
            <h2>新建联系人</h2>
            <div class="bottom">
                <div class="clue">
                    <label class="left">姓名</label>
                    <div class="right"><input type="text" class="in"></div>

                </div>
                <div class="clue">
                    <label class="left">客户</label>
                    <div class="right"><input type="text" class="in"></div>
                </div>
                <div class="clue">
                    <label class="left">职务</label>
                    <div class="right"><input type="text" class="in"></div>
                </div>
                <div class="clue">
                    <label class="left">联系电话</label>
                    <div class="right"><input type="text" class="in"></div>
                </div>
                <div class="clue">
                    <label class="left">电子邮箱</label>
                    <div class="right"><input type="text" class="in"></div>
                </div>
                <div class="clue">
                    <label class="left">联系地址</label>
                    <div class="right"><input type="text" class="in"></div>
                </div>
                <div class="clue">
                    <label class="left">备注</label>
                    <div class="right"><textarea name="" id="" cols="30" rows="3" class="in"></textarea></div>
                </div>
                <div class="clue">
                    <label class="left">性别</label>
                    <div class="right">
                        <input type="radio" name="sex" value="1" checked>男
                        <input type="radio" name="sex" value="2">女
                    </div>
                </div>
                <div class="clue">
                    <label class="left">决策人</label>
                    <div class="right">
                        <input type="checkbox" name="decision" value="1">是
                    </div>
                </div>
                <div class="clue">
                    <label class="left"></label>
                    <button class="c" style="margin-right: 20px;">取消</button>
                    <button class="s">保存</button>
                </div>


            </div>
    </div>

    </form>
    </div>
</body>

</html>